<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>评审记录</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="dialogVisible = true"
        >新增评审</el-button>
      </div>
      <el-table style="width: 100%" :data="tableData">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column prop="review.title" label="评审内容" align="center"></el-table-column>
        <el-table-column prop="review.managerName" label="项目管理工程师" align="center"></el-table-column>
        <el-table-column prop="reviewUser" label="评审人员" align="center"></el-table-column>
        <el-table-column prop="review.createTime" label="创建时间" align="center"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="size"
        :total="total"
        @current-change="pageChange"
        class="pagination"
      ></el-pagination>
    </el-card>
    <el-dialog title="新增评审" :visible.sync="dialogVisible" center>
      <el-form :model="form" label-width="120px">
        <el-form-item label="评审内容">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="项目管理工程师">
          <el-button type="text" @click="select('manager')">{{managers || '选择'}}</el-button>
        </el-form-item>
        <el-form-item label="评审人员">
          <el-button type="text" @click="select('review')">{{users || '选择'}}</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="选择负责人" :visible.sync="selectVisible" width="600px">
      <UserSelect :roleId="roleId" :checkList="checkList" v-if="selectVisible" @changeCheckList="changeCheckList" :isSingle="isSingle"></UserSelect>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectVisible = false">取 消</el-button>
        <el-button type="primary" @click="selected">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import UserSelect from '@/components/userselect'
export default {
  components: {UserSelect},
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      form: {
        content: ""
      },
      managers: "",
      users: "",
      user: "",
      manager: "",
      loading: false,
      current: 1,
      size: 10,
      total: 0,
      roleId: '',
      checkList: [],
      isSingle: true,
      selectVisible: false,
      selectType: ''
    };
  },
  methods: {
    getPage() {
      let params = {
        projectId: this.$route.query.id,
        size: this.size, 
        current: this.current
      };
      this.$store.dispatch("project/getPageReview", params).then(res => {
        this.tableData = res.records.map(item => {
          let user = [];
          item.reviewUserList.forEach(el => {
            user.push(el.userName);
          });
          item.reviewUser = user.join(",");
          return item;
        });
        this.total = res.total * 1;
        this.current = res.current * 1;
      });
    },
    commit() {
      let params = {
        projectId: this.$route.query.id,
        title: this.form.content,
        managerId: this.manager.id,
        reviewUserList: this.user.map(item => {
          return item.id;
        })
      };
      this.$store.dispatch("project/addReview", params).then(res => {
        this.showSuccessMessage("添加成功");
        this.dialogVisible = false;
        this.getPage();
      });
    },
    pageChange(current) {
      this.current = current * 1;
      this.getPage();
    },
    select(type) {
      this.checkList = [];
      if(type === 'manager') {
        this.roleId = '1181464065904168962';
        this.selectType = type;
        this.isSingle = true;
        if(this.manager) {
          this.checkList = this.manager;
        }
      } else {
        this.roleId = '1181464216098000897';
        this.selectType = type;
        this.isSingle = false;
        if(this.user) {
          this.checkList = this.user;
        }
      }
      this.selectVisible = true;
    },
    selected() {
      if(this.selectType == 'manager') {
        this.manager = this.checkList[0];
        this.managers = this.checkList[0].name;
      } else {
        this.user = this.checkList;
        this.users = this.checkList.map(item => {
          return item.name;
        }).join(',');
      }
      console.log(this.users);
      this.selectVisible = false;
    },
    changeCheckList(newCheckList) {
      this.checkList = newCheckList
    }
  },
  mounted() {
    this.getPage();
  }
};
</script>
<style lang="less" scoped>
.search {
  width: 100%;
}
.pagination {
  margin-top: 20px;
}
</style>